<template>
  <view class="RefrigertorB-setting">
    <SwitchDraw
      :title="$t('RefrigeratorB.Setting.Light.Text')"
      @changes="initSlider"
      :isChecked="control.store.$state.lightMode != 0"
    >
      <view class="control-btn-group">
        <view
          class="control-btn"
          v-for="(items, index) in lightGroups"
          :key="index"
          :class="{ 'btn-active': control.store.$state.lightMode.toString() == items.value }"
          @click="changeLight(items)"
        >
          {{ items.name }}
        </view>
      </view>
      <view class="control-solid">
        <view class="control-title">{{ $t('RefrigeratorB.Setting.LightBrightness.Text') }}</view>
        <view class="control-show">
          <text class="show-tips">{{ $t('RefrigeratorB.Setting.LightBrightness.Weak.Text') }}</text>
          <slider
            v-if="true"
            class="slider-view refrigertorBsetting-slider"
            :class="{
              'refrigertorBsetting-slider1': lightValue === 1,
              'refrigertorBsetting-slider2': lightValue === 2,
              'refrigertorBsetting-slider3': lightValue === 3,
              'refrigertorBsetting-slider4': lightValue === 4,
              'refrigertorBsetting-slider5': lightValue === 5,
              'refrigertorBsetting-slider6': lightValue === 6,
              'refrigertorBsetting-slider7': lightValue === 7,
              'refrigertorBsetting-slider8': lightValue === 8,
              'refrigertorBsetting-slider9': lightValue === 9,
            }"
            active-color="#408df2"
            background-color="#e9e9ed"
            :min="lightMin"
            :max="lightMax"
            :value="lightValue"
            @change="valueChange"
            @changing="valueChangeing"
            @click.stop
            block-size="18"
          >
          </slider>
          <text class="show-tips">{{ $t('RefrigeratorB.Setting.LightBrightness.Strong.Text') }}</text>
        </view>
        <view class="min-max-box">
          <view class="min-max">
            <block v-if="lightValue !== lightMin">{{ lightMin }}</block>
          </view>
          <view class="min-max">
            <block v-if="lightValue !== lightMax">{{ lightMax }}</block>
          </view>
        </view>
      </view>
    </SwitchDraw>
    <SwitchDraw
      :title="$t('RefrigeratorB.Setting.Sterilization.Text')"
      style="margin: 24rpx 0; display: block"
      :isChecked="control.store.$state.hygineMode != 0"
      @changes="initHygieneMode"
    >
      <template #icon>
        <view class="icon_tips" @click="openHygieneModal"
          ><image mode="aspectFit" src="@/static/ic_tips_icon.png"></image
        ></view>
      </template>
      <view class="control-btn-group">
        <view
          class="control-btn"
          v-for="(items, index) in disinfectGroups"
          :key="index"
          :class="{ 'btn-active': control.store.$state.hygineMode.toString() == items.value }"
          @click="changeHygiene(items)"
        >
          {{ items.name }}
        </view>
      </view>
    </SwitchDraw>
    <SimpleSettingCard
      v-for="(items, index) in newSettingGroups"
      :key="index"
      :name="(items.name as string)"
      :value="(items.value as string | number)"
      @click="openDraw(items)"
      :name-custom-style="'font-size:36rpx;'"
      :value-custom-style="'font-size:36rpx;'"
    ></SimpleSettingCard>
    <Modal
      :visible="isShowHegigny"
      @close="isShowHegigny = false"
      :title="$t('RefrigeratorB.Setting.Sterilization.Illustrate.Text')"
      :ok-text="$t('RefrigeratorB.Setting.Sterilization.ConFirm.Text')"
      @ok="isShowHegigny = false"
    >
      {{ $t('RefrigeratorB.Setting.Sterilization.Model.Content') }}
    </Modal>
  </view>
</template>

<script setup lang="ts">
import type { RefrigeratorBController, RefrigeratorBSettingGroup } from '@/controller/RefrigeratorB/definition'
import {
  REFRIGERTORB_SLIENTMODE,
  REFRIGERTORB_LIGHTMODE,
  REFRIGERTORB_LIGHTMODE_OFF,
  REFRIGERTORB_LIGHTMODE_COLDMODE,
  REFRIGERTORB_LIGHTMODE_NATUREMODE,
  REFRIGERTORB_LIGHTMODE_WARMMODE,
  REFRIGERTORB_HYGIENEMODE,
  REFRIGERTORB_LIGHTBRIGHTNESS,
  REFRIGERTORB_HYGIENEMODE_FORCEDSTERILIZATIONMODE,
  REFRIGERTORB_HYGIENEMODE_AUTOSTERILIZATIONMODE,
  REFRIGERTORB_HYGIENEMODE_OFF,
} from '@/constants/Command'
import SwitchDraw from '@/common/switchDraw.vue'
import SimpleSettingCard from '../components/simpleSettingCard.vue'
import { getAllSetting, setSettingByNokeySettings } from '@/api/appliance'
import { actionDebounce } from '@/utils/mpHelper'
import Modal from '@/common/modal.vue'
import { applianceControlTrack } from '@/dataReport/dataReportUtil'
import { useI18n } from 'vue-i18n'
type GroupsType = {
  key: string
  name: string
  value: string
}
const i18n = useI18n()
const sortKey = [REFRIGERTORB_SLIENTMODE]
const props = defineProps<{
  control: RefrigeratorBController.Control
}>()
const emit = defineEmits<{
  (e: 'openSetting', items: RefrigeratorBSettingGroup): void
}>()
const newSettingGroups = ref<RefrigeratorBSettingGroup[]>([])
const isCurrentlight = ref('1')
const isCurrentdisinfect = ref('1')
const lightValue = ref(1)
const lightGroups = [
  {
    name: i18n.t('RefrigeratorB.Setting.LightType.Cool.Text'),
    key: REFRIGERTORB_LIGHTMODE_COLDMODE,
    value: '2',
  },
  {
    name: i18n.t('RefrigeratorB.Setting.LightType.Nature.Text'),
    key: REFRIGERTORB_LIGHTMODE_NATUREMODE,
    value: '3',
  },
  {
    name: i18n.t('RefrigeratorB.Setting.LightType.Warm.Text'),
    key: REFRIGERTORB_LIGHTMODE_WARMMODE,
    value: '1',
  },
]
const disinfectGroups = [
  {
    name: i18n.t('RefrigeratorB.Setting.SterilizationType.Automatic.Text'),
    value: '1',
    key: REFRIGERTORB_HYGIENEMODE_AUTOSTERILIZATIONMODE,
  },
  {
    name: i18n.t('RefrigeratorB.Setting.SterilizationType.Force.Text'),
    value: '2',
    key: REFRIGERTORB_HYGIENEMODE_FORCEDSTERILIZATIONMODE,
  },
]

watch(
  () => props.control.store.isOffline,
  (isOffline) => {
    if (!isOffline) {
      initControlSettings()
    }
  }
)
/**
 * 灯光控制
 */
async function initSlider(e: boolean) {
  isLightModeGroup.value = e
  if (e) {
    changeLight(lightGroups[lightGroups.findIndex((items) => items.value === '2')])
    nextTick(() => {})
  } else {
    await applianceControlTrack(
      () =>
        setSettingByNokeySettings(
          props.control.store._datasource.haId,
          REFRIGERTORB_LIGHTMODE,
          REFRIGERTORB_LIGHTMODE_OFF
        ),
      'appliance_setting',
      { setting_key: REFRIGERTORB_LIGHTMODE, setting_value: REFRIGERTORB_LIGHTMODE_OFF },
      'RefrigeratorB.Detail.Parameter.Setting'
    )
  }
}
/**
 * 除菌控制
 */
const isShowHegigny = ref(false)
async function initHygieneMode(e: boolean) {
  isHygieneMode.value = e
  if (!e) {
    await applianceControlTrack(
      () =>
        setSettingByNokeySettings(
          props.control.store._datasource.haId,
          REFRIGERTORB_HYGIENEMODE,
          REFRIGERTORB_HYGIENEMODE_OFF
        ),
      'appliance_setting',
      { setting_key: REFRIGERTORB_HYGIENEMODE, setting_value: REFRIGERTORB_HYGIENEMODE_OFF },
      'RefrigeratorB.Detail.Parameter.Setting'
    )
  } else {
    changeHygiene(disinfectGroups[disinfectGroups.findIndex((items) => items.value === '1')])
  }
}
const openHygieneModal = actionDebounce({
  call: async () => {
    isShowHegigny.value = true
  },
})
const changeHygiene = actionDebounce({
  call: async (items: GroupsType) => {
    isCurrentdisinfect.value = items.value
    await applianceControlTrack(
      () => setSettingByNokeySettings(props.control.store._datasource.haId, REFRIGERTORB_HYGIENEMODE, items.key),
      'appliance_setting',
      { setting_key: REFRIGERTORB_HYGIENEMODE, setting_value: items.key },
      'RefrigeratorB.Detail.Parameter.Setting'
    )
  },
})
watch(
  () => props.control.store.$state.lightBrightNess,
  (lightBrightNess) => {
    lightValue.value = lightBrightNess
  }
)
/**
 * 性能模式
 */
watchEffect(() => {
  let slientModeValue = props.control.store.$state.slientMode
  newSettingGroups.value = []
  let curSetting = {
    name: i18n.t('RefrigeratorB.Setting.SlientMode.Text'),
    value: '',
    key: REFRIGERTORB_SLIENTMODE,
  }
  if (slientModeValue === 0) {
    curSetting.value = i18n.t('RefrigeratorB.Setting.SlientMode.Function.Text')
  } else if (slientModeValue === 1) {
    curSetting.value = i18n.t('RefrigeratorB.Setting.SlientMode.Slient.Text')
  } else if (slientModeValue === 2) {
    curSetting.value = i18n.t('RefrigeratorB.Setting.SlientMode.Sleep.Text')
  }

  newSettingGroups.value.push(curSetting)
})
const changeLight = actionDebounce({
  call: async (item: GroupsType) => {
    isCurrentlight.value = item.value
    await applianceControlTrack(
      () => setSettingByNokeySettings(props.control.store._datasource.haId, REFRIGERTORB_LIGHTMODE, item.key),
      'appliance_setting',
      { setting_key: REFRIGERTORB_LIGHTMODE, setting_value: item.key },
      'RefrigeratorB.Detail.Parameter.Setting'
    )
  },
})
function valueChangeing(e: any) {
  lightValue.value = e.detail.value
}
async function valueChange(e: any) {
  lightValue.value = e.detail.value
  await applianceControlTrack(
    () =>
      setSettingByNokeySettings(props.control.store._datasource.haId, REFRIGERTORB_LIGHTBRIGHTNESS, lightValue.value),
    'appliance_setting',
    { setting_key: REFRIGERTORB_LIGHTBRIGHTNESS, setting_value: lightValue.value },
    'RefrigeratorB.Detail.Parameter.Setting'
  )
}

function openDraw(items: RefrigeratorBSettingGroup) {
  emit('openSetting', items)
}

/**
 * 灯光处理的变量
 */
const isLightModeGroup = ref(false)
const lightMax = ref(9)
const lightMin = ref(1)
/**
 * 除菌处理的变量
 */
const isHygieneMode = ref(false)

/**
 * 初始化功能控制页
 */
const keyGroup = [REFRIGERTORB_LIGHTMODE, REFRIGERTORB_HYGIENEMODE, REFRIGERTORB_LIGHTBRIGHTNESS]
async function initControlSettings() {
  const res = await getAllSetting(props.control.store._datasource.haId)
  if (res.code === 0) {
    const settings = res.data.settings
    keyGroup.map((items) => {
      const settingGroups = settings.find((group) => group.key === items)
      if (items === REFRIGERTORB_LIGHTMODE) {
        if (settingGroups?.value === 0) {
          isLightModeGroup.value = false
        } else {
          isLightModeGroup.value = true
          isCurrentlight.value = (settingGroups?.value as number).toString()
        }
      } else if (items === REFRIGERTORB_LIGHTBRIGHTNESS) {
        lightMin.value = Number(settingGroups?.min as string)
        lightMax.value = Number(settingGroups?.max as string)
        lightValue.value = settingGroups?.value as number
      } else if (items === REFRIGERTORB_HYGIENEMODE) {
        if (settingGroups?.value === 0) {
          isHygieneMode.value = false
        } else {
          isHygieneMode.value = true
          isCurrentdisinfect.value = (settingGroups?.value as number).toString()
        }
      }
    })
  }
}
</script>
<style lang="less">
.RefrigertorB-setting {
  padding: 0 32rpx;
  margin-top: 32rpx;
  .RB-slider-bar {
    flex: 1;
    padding: 0 32rpx;
  }
  .icon_tips {
    display: inline-block;
    & > image {
      width: 28rpx;
      height: 28rpx;
      transform: translateY(2px);
    }
  }
  .control-btn-group {
    display: flex;
    .control-btn {
      flex: 1;
      display: flex;
      height: 72rpx;
      flex-shrink: 0;
      justify-content: center;
      align-items: center;
      color: #2d3746;
      font-size: 28rpx;
      font-weight: 500;
      letter-spacing: -0.5px;
      background: var(--primary-grey-medium, #e9e9ed);
      border: 2rpx solid var(--primary-grey-medium, #e9e9ed);
    }
    .btn-active {
      pointer-events: none;
      background-color: #fff;
      color: rgba(64, 141, 242, 1);
    }
  }
  .control-solid {
    margin-top: 52rpx;
    .control-title {
      color: var(--primary-petrol, #2d3746);
      font-size: 32rpx;
      font-weight: 400;
      letter-spacing: -0.5px;
    }
    .control-show {
      display: flex;
      align-items: center;
      margin-top: 32rpx;
      .show-tips {
        color: var(--primary-petrol, #2d3746);
        font-size: 28rpx;
        font-weight: 400;
        letter-spacing: -0.5px;
      }
    }
    .min-max-box {
      display: flex;
      justify-content: space-between;
      padding: 0 46rpx;
      padding-right: 54rpx;
      .min-max {
        color: var(--primary-grey-dark, #b4b9c3);
        font-size: 28rpx;
        font-weight: 400;
        letter-spacing: -0.5px;
      }
    }
  }
  .slider-view {
    margin-right: 32rpx;
    margin-left: 24rpx;
    width: 100%;
    .wx-slider-handle-wrapper {
      height: 32rpx;
      border-radius: 0;
    }
    .wx-slider-thumb {
      &::after {
        content: '1';
        position: absolute;
        left: 0;
        bottom: 0;
      }
    }
  }
}
</style>
